<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="css/ui-box.css">
        <link rel="stylesheet" href="css/ui-base.css">
        <link rel="stylesheet" href="css/ui-color.css">
        <link rel="stylesheet" href="css/appcan.icon.css">
        <link rel="stylesheet" href="css/appcan.control.css">
    </head>
    <body class="um-vp" ontouchstart>
        <div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
            <!--header开始-->
            <div id="header" class="uh bc-text-head ub bc-head">
                <div class="nav-btn" id="nav-left"></div>
                <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">AppCan</h1>
                <div class="nav-btn" id="nav-right">
                    <!--按钮开始-->
                    <div class="btn ub ub-ac bc-text-head ub-pc bc-btn"  id="btn1">
                        执行
                    </div>

                    <!--按钮结束-->
                </div>
            </div>
            <!--header结束--><!--content开始-->
            <div id="content" class="ub-f1 tx-l ">
                <div id="tabview" class="uf sc-bg"></div>

            </div>
            <!--content结束-->

        </div>
        <script src="js/appcan.js"></script>
        <script src="js/appcan.control.js"></script>
        <script src="js/appcan.tab.js"></script>
    </body>
    <script>
        var tabview = appcan.tab({
            selector : "#tabview",
            hasIcon : false,
            hasAnim : true,
            hasLabel : true,
            hasBadge : false,
            data : [{
                label : "QQ",
            }, {
                label : "微软",
            }, {
                label : "微信",
            }]
        });

        tabview.on("click", function(obj, index) {
            appcan.window.selectMultiPopover("content", index);
        })
        appcan.ready(function() {
            var titHeight = $('#header').offset().height + $("#tabview").offset().height;
            appcan.frame.open({/*创建多浮动窗口*/
                id : "content",
                url : [{
                    "inPageName" : "index_content",
                    "inUrl" : "index_content.html",
                }, {
                    "inPageName" : "main_content",
                    "inUrl" : "main_content.html",
                }, {
                    "inPageName" : "test_content",
                    "inUrl" : "test_content.html",
                }],
                top : titHeight,
                left : 0,
                index : 0,
                change : function(index, res) {/*浮动窗口推拽变更时回调，可控制tab进行同步变更*/
                    tabview.moveTo(res.multiPopSelectedIndex);
                }
            });
            window.onorientationchange = window.onresize = function() {
                appcan.frame.resize("content", 0, titHeight);
            }
        });
        // tabview
        appcan.button("#btn1", "ani-act", function() {
            alert('zhixing');
            // 执行QQ窗口的方法
            /*
             appcan.window.evaluateMultiPopoverScript({
             windName : 'root',
             popName : 'content',
             inPageName : 'index_content',
             js : 'alert("pp")',
             });
             */
            /*
             appcan.window.evaluatePopoverScript({
             name : 'root',
             popName : 'index_content',
             scriptContent : 'alert("hello world")'
             });
             */
            uexWindow.evaluatePopoverScript({
                windName : 'root',
                popName : 'index_content',
                js : 'show_index_content();'
            });
        });
    </script>
</html>